import React, { useContext } from "react";
import { View, StyleSheet, Dimensions, Text, Image } from "react-native";
import { Overlay } from "@rneui/themed";
import QRCode from 'react-native-qrcode-svg';
import CommonContext from '@/utils/createContext'
import { PayWithArray } from '@/config/config'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const AddressModal = () => {

    const { modalVisible, setModalVisible, selectedSafeWallet } = useContext(CommonContext)

    return (
        <Overlay
            animationType="slide"
            transparent={true}
            isVisible={modalVisible}
            onRequestClose={() => {
                setModalVisible(!modalVisible);
            }}
            onBackdropPress={() => {
                setModalVisible(!modalVisible);
            }}
            overlayStyle={{ width: 330 * ratio, height: 392 * ratio, borderRadius: 5 }}
        >
            <View style={styles.centeredView}>
                <Image source={PayWithArray[selectedSafeWallet && selectedSafeWallet.profileImg]} style={styles.img} />
                <Text style={styles.title1}>{selectedSafeWallet && selectedSafeWallet.label}</Text>
                <Text style={styles.title2}>{selectedSafeWallet && selectedSafeWallet.address}</Text>
                <View style={styles.qrContent}>
                    <QRCode
                        value={selectedSafeWallet && selectedSafeWallet.address}
                        logoBorderRadius={5}
                        color={"#000000"}
                        backgroundColor={"#FFFFFF"}
                        size={150}
                    />
                </View>
            </View>
        </Overlay>
    )
}

const styles = StyleSheet.create({
    centeredView: {
        justifyContent: "center",
        alignItems: 'center'
    },
    img: {
        width: 40 * ratio,
        height: 40 * ratio,
        marginTop: 38 * ratio
    },
    title1: {
        fontSize: 16,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#2C2C2C',
        lineHeight: 24,
        marginTop: 9 * ratio
    },
    title2: {
        width: 188 * ratio,
        fontSize: 14,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#2C2C2C',
        lineHeight: 19,
        marginTop: 9 * ratio,
        textAlign: 'center'
    },
    qrContent: {
        width: 172 * ratio,
        height: 172 * ratio,
        borderRadius: 5,
        borderWidth: 1,
        borderColor: '#EEEEEE',
        marginTop: 19 * ratio,
        justifyContent: 'center',
        alignItems: 'center'
    }
})
export default AddressModal